<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jsonco
 * @Date: 2022-05-25 19:54:25
 * @LastEditors: sueRimn
 * @LastEditTime: 2022-07-15 19:52:52
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="gl-matrix.js"></script>
    <script>
        let vertexstring = `
        attribute vec4 a_position;
        uniform mat4 u_formMatrix;
        attribute vec4 a_Normal;
        uniform vec3 u_PointLightPosition;
        uniform vec3 u_DiffuseLight;
        uniform vec3 u_AmbientLight;
        varying vec4 v_Color;
        void main(void){
        gl_Position = u_formMatrix * a_position;
        vec3 normal = normalize(a_Normal.xyz);
        vec3 lightDirection = normalize(u_PointLightPosition - vec3(gl_Position.xyz));
        float nDotL = max(dot(lightDirection, normal), 0.0);
        vec3 diffuse = u_DiffuseLight * vec3(1.0,0,1.0)* nDotL;
        vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0);
        v_Color = vec4(diffuse + ambient, 1);
        }
        `;
        let fragmentstring = `
        precision mediump float;
        varying vec4 v_Color;
        void main(void){
          gl_FragColor =v_Color;
        }
        `;

        var webgl;
        var angle = 45;
        var webglDiv;
        var indices
        var g_joint1Angle = 86.0;
        var ANGLE_STEP = 3.0;
        var g_arm1Angle = 160.0;
        var g_palm1Angle = 0.0;
        var g_finger1Angle = 0.0;
        var g_chest1Angle = 0

        function init() {
            //初始化webgl
            initWebgl();
            //初始化shader
            initShader();
            clearn();
            initLight();
            drawHead()
            //初始化数据
            initBuffer();
            //初始化事件
            initEvent();
            //清空画板
            //创建光源
            //绘制图形
            let drawMatrix = chestDraw();
            let drawMatrixCopy = drawMatrix.slice(0)
            drawLeft(drawMatrix);
            drawRight(drawMatrixCopy);

        }

        function initWebgl() {
            webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);

        }
        function initShader() {

            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)
            webgl.linkProgram(program);
            webgl.useProgram(program);
            webgl.program = program

        }

        function clearn() {
            webgl.clearColor(0, 0, 0, 1);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.enable(webgl.DEPTH_TEST);
        }
        //矩阵变换  g_joint1Angle
        function initTransformation(angele, rotateArr, ModelMatrix = glMatrix.mat4.create()) {
            let ProjMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ProjMatrix);
            glMatrix.mat4.perspective(ProjMatrix, angle * Math.PI / 180, webglDiv.clientWidth / webglDiv.clientHeight, 1, 1000)    //修改可视域范围

            let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");

            glMatrix.mat4.rotate(ModelMatrix, ModelMatrix, degreesToRads(angele), rotateArr);
            let ViewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ViewMatrix);
            glMatrix.mat4.lookAt(ViewMatrix, [0, 0, 100], [0, 0, 0], [0, 1, 0]);

            let mvMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(mvMatrix);
            glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix);

            let mvpMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(mvpMatrix);
            glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix);
            webgl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix)
            return ModelMatrix;

        }
        function initEvent() {
            document.onkeydown = keydown;
        }
        function initLight() {
            let u_DiffuseLight = webgl.getUniformLocation(webgl.program, 'u_DiffuseLight');
            webgl.uniform3f(u_DiffuseLight, 1.0, 1.0, 1.0);
            let u_LightDirection = webgl.getUniformLocation(webgl.program, 'u_PointLightPosition');
            webgl.uniform3fv(u_LightDirection, [3.0, 3.0, 4.0]);
            let u_AmbientLight = webgl.getUniformLocation(webgl.program, 'u_AmbientLight');
            webgl.uniform3f(u_AmbientLight, 0.8, 0.8, 0.8);
        }
        function initData() {

        }
        function initBuffer() {

            var vertices = new Float32Array([
                1.5, 10.0, 1.5, -1.5, 10.0, 1.5, -1.5, 0.0, 1.5, 1.5, 0.0, 1.5, // v0-v1-v2-v3 front
                1.5, 10.0, 1.5, 1.5, 0.0, 1.5, 1.5, 0.0, -1.5, 1.5, 10.0, -1.5, // v0-v3-v4-v5 right
                1.5, 10.0, 1.5, 1.5, 10.0, -1.5, -1.5, 10.0, -1.5, -1.5, 10.0, 1.5, // v0-v5-v6-v1 up
                -1.5, 10.0, 1.5, -1.5, 10.0, -1.5, -1.5, 0.0, -1.5, -1.5, 0.0, 1.5, // v1-v6-v7-v2 left
                -1.5, 0.0, -1.5, 1.5, 0.0, -1.5, 1.5, 0.0, 1.5, -1.5, 0.0, 1.5, // v7-v4-v3-v2 down
                1.5, 0.0, -1.5, -1.5, 0.0, -1.5, -1.5, 10.0, -1.5, 1.5, 10.0, -1.5  // v4-v7-v6-v5 back
            ]);

            // Normal
            var normals = new Float32Array([
                0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
                1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
                0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
                -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
                0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-v2 down
                0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0  // v4-v7-v6-v5 back
            ]);

            // Indices of the vertices
            indices = new Uint8Array([
                0, 1, 2, 0, 2, 3,    // front
                4, 5, 6, 4, 6, 7,    // right
                8, 9, 10, 8, 10, 11,    // up
                12, 13, 14, 12, 14, 15,    // left
                16, 17, 18, 16, 18, 19,    // down
                20, 21, 22, 20, 22, 23     // back
            ]);


            let pointPosition = new Float32Array(vertices);
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aPsotion);
            webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 0, 0);

            let aNormal = webgl.getAttribLocation(webgl.program, "a_Normal");
            let normalsBuffer = webgl.createBuffer();
            let normalsArr = new Float32Array(normals);
            webgl.bindBuffer(webgl.ARRAY_BUFFER, normalsBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, normalsArr, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aNormal);
            webgl.vertexAttribPointer(aNormal, 3, webgl.FLOAT, false, 0, 0);



            let indexBuffer = webgl.createBuffer();
            let indices1 = new Uint8Array(indices);
            webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);
            webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indices1, webgl.STATIC_DRAW);








        }
        function keydown(ev) {

            console.log(g_joint1Angle);
            debugger
            switch (ev.keyCode) {

                case 38:
                    if (g_joint1Angle < 135.0) g_joint1Angle += ANGLE_STEP;
                    break;
                case 40:
                    if (g_joint1Angle > -135.0) g_joint1Angle -= ANGLE_STEP;
                    break;
                case 39:
                    g_arm1Angle += ANGLE_STEP;
                    break;
                case 37:
                    g_arm1Angle -= ANGLE_STEP;
                    break;
                case 87:
                    g_palm1Angle += ANGLE_STEP;
                    break;
                case 83:
                    g_palm1Angle -= ANGLE_STEP;
                    break;
                case 90:
                    g_finger1Angle += ANGLE_STEP;
                    break;
                case 79:
                    g_chest1Angle += ANGLE_STEP;
                    break;
                case 80:
                    g_chest1Angle -= ANGLE_STEP;
                    break;

                default: return;
            }
            clearn()
            initBuffer();
            let drawMatrix = chestDraw();
            let drawMatrixCopy = drawMatrix.slice(0)
            drawLeft(drawMatrix);
            drawRight(drawMatrixCopy);
            drawHead()
        }
        function degreesToRads(deg) {
            let rads = (deg * Math.PI) / 180.0;
            return rads;
        }

        function chestDraw() {
            let chestPosition = glMatrix.mat4.create();
            glMatrix.mat4.translate(chestPosition, chestPosition, [14.5, 0, 0]);
            glMatrix.mat4.scale(chestPosition, chestPosition, [8, 1.5, 2]);
            let modelArr = initTransformation(g_chest1Angle, [0, 1, 0], chestPosition);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);
            return modelArr;
        }
        function drawLeft(BigArmPosition) {
            //绘制大手臂
            // let BigArmPosition = glMatrix.mat4.create();
            glMatrix.mat4.translate(BigArmPosition, BigArmPosition, [-1.5, 0, 0]);
            glMatrix.mat4.scale(BigArmPosition, BigArmPosition, [1 / 8, 1 / 1.5, 1 / 2]);
            glMatrix.mat4.scale(BigArmPosition, BigArmPosition, [1.5, 1, 1.5]);
            let modelArr = initTransformation(g_joint1Angle, [0, 1, 0], BigArmPosition);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);

            //绘制小手臂
            let armPosition = glMatrix.mat4.create();
            glMatrix.mat4.identity(armPosition);
            glMatrix.mat4.translate(armPosition, modelArr, [0, 0, 0]);
            glMatrix.mat4.scale(armPosition, armPosition, [0.8, 1, 0.8]);
            let mvpArr = initTransformation(g_arm1Angle, [0, 0, 1], armPosition);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);
            //绘制手掌
            glMatrix.mat4.translate(mvpArr, mvpArr, [0, 10, 0]);
            glMatrix.mat4.scale(mvpArr, mvpArr, [2, 0.2, 2]);
            mvpArr = initTransformation(g_palm1Angle, [0, 1, 0], mvpArr);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);
            //绘制手指
            let fingerPosition1 = glMatrix.mat4.create();
            glMatrix.mat4.identity(fingerPosition1);
            glMatrix.mat4.translate(fingerPosition1, mvpArr, [1, 10, 0]);
            glMatrix.mat4.scale(fingerPosition1, fingerPosition1, [0.2, 5, 0.2]);
            fingerPosition1 = initTransformation(g_finger1Angle, [0, 0, 1], fingerPosition1);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);
            let fingerPosition2 = glMatrix.mat4.create();
            glMatrix.mat4.identity(fingerPosition2);
            glMatrix.mat4.translate(fingerPosition2, mvpArr, [-1, 10, 0]);
            glMatrix.mat4.scale(fingerPosition2, fingerPosition2, [0.2, 5, 0.2]);
            mvpArr = initTransformation(g_finger1Angle, [0, 0, 1], fingerPosition2);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);



        }

        function drawRight(BigArmPosition) {
            //绘制大手臂
            // let BigArmPosition = glMatrix.mat4.create();
            glMatrix.mat4.translate(BigArmPosition, BigArmPosition, [1.5, 0, 0]);
            glMatrix.mat4.scale(BigArmPosition, BigArmPosition, [1 / 8, 1 / 1.5, 1 / 2]);
            glMatrix.mat4.scale(BigArmPosition, BigArmPosition, [1.5, 1, 1.5]);
            let modelArr = initTransformation(g_joint1Angle, [0, 1, 0], BigArmPosition);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);

            //绘制小手臂
            let armPosition = glMatrix.mat4.create();
            glMatrix.mat4.identity(armPosition);
            glMatrix.mat4.translate(armPosition, modelArr, [0, 0, 0]);
            glMatrix.mat4.scale(armPosition, armPosition, [0.8, 1, 0.8]);
            let mvpArr = initTransformation(g_arm1Angle, [0, 0, 1], armPosition);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);
            //绘制手掌
            glMatrix.mat4.translate(mvpArr, mvpArr, [0, 10, 0]);
            glMatrix.mat4.scale(mvpArr, mvpArr, [2, 0.2, 2]);
            mvpArr = initTransformation(g_palm1Angle, [0, 1, 0], mvpArr);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);
            //绘制手指
            let fingerPosition1 = glMatrix.mat4.create();
            glMatrix.mat4.identity(fingerPosition1);
            glMatrix.mat4.translate(fingerPosition1, mvpArr, [1, 10, 0]);
            glMatrix.mat4.scale(fingerPosition1, fingerPosition1, [0.2, 5, 0.2]);
            fingerPosition1 = initTransformation(g_finger1Angle, [0, 0, 1], fingerPosition1);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);
            let fingerPosition2 = glMatrix.mat4.create();
            glMatrix.mat4.identity(fingerPosition2);
            glMatrix.mat4.translate(fingerPosition2, mvpArr, [-1, 10, 0]);
            glMatrix.mat4.scale(fingerPosition2, fingerPosition2, [0.2, 5, 0.2]);
            mvpArr = initTransformation(g_finger1Angle, [0, 0, 1], fingerPosition2);
            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0);
        }
        function drawHead() {

            let positions = [];
            let indicesArr = []
            let SPHERE_DIV = 15;
            let i, ai, si, ci;
            let j, aj, sj, cj;
            let p1, p2;
            for (j = 0; j <= SPHERE_DIV; j++) {
                aj = j * Math.PI / SPHERE_DIV;
                sj = Math.sin(aj);
                cj = Math.cos(aj);
                for (i = 0; i <= SPHERE_DIV; i++) {
                    ai = i * 2 * Math.PI / SPHERE_DIV;
                    si = Math.sin(ai);
                    ci = Math.cos(ai);

                    positions.push(ci * sj);  // X
                    positions.push(cj);       // Y
                    positions.push(si * sj);  // Z
                }
            }
            for (j = 0; j < SPHERE_DIV; j++) {
                for (i = 0; i < SPHERE_DIV; i++) {
                    p1 = j * (SPHERE_DIV + 1) + i;
                    p2 = p1 + (SPHERE_DIV + 1);

                    indicesArr.push(p1);
                    indicesArr.push(p2);
                    indicesArr.push(p1 + 1);

                    indicesArr.push(p1 + 1);
                    indicesArr.push(p2);
                    indicesArr.push(p2 + 1);
                }
            }
            let pointPosition = new Float32Array(positions);
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);

            webgl.enableVertexAttribArray(aPsotion);
            webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 0, 0);

            let aNormal = webgl.getAttribLocation(webgl.program, "a_Normal");
            let normalsBuffer = webgl.createBuffer();
            let normalsArr = new Float32Array(positions);
            webgl.bindBuffer(webgl.ARRAY_BUFFER, normalsBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, normalsArr, webgl.STATIC_DRAW);

            webgl.enableVertexAttribArray(aNormal);
            webgl.vertexAttribPointer(aNormal, 3, webgl.FLOAT, false, 0, 0);


            let indexBuffer1 = webgl.createBuffer();
            let indices1 = new Uint8Array(indicesArr);
            webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer1);
            webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indices1, webgl.STATIC_DRAW);


            let headPosition = glMatrix.mat4.create();
            glMatrix.mat4.translate(headPosition, headPosition, [14.5, 22, 0]);
            glMatrix.mat4.scale(headPosition, headPosition, [8, 8, 8]);
            initTransformation(g_chest1Angle, [0, 1, 0], headPosition);
            webgl.drawElements(webgl.TRIANGLES, indicesArr.length, webgl.UNSIGNED_BYTE, 0);

            
            webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, null);
            webgl.deleteBuffer(indexBuffer1);
            webgl.bindBuffer(webgl.ARRAY_BUFFER, null);
            webgl.deleteBuffer(normalsBuffer);
            webgl.bindBuffer(webgl.ARRAY_BUFFER, null);
            webgl.deleteBuffer(triangleBuffer);
        }

    </script>
</head>

<body onload="init()">
    <canvas id='myCanvas' width="1024" height='768'></canvas>
    <div id="text"></div>
</body>

</html>